<template>
  <div>
    <el-form :model="formData" label-width="40%" style="width:70%">
      <el-form-item label="品牌*" prop="brandId">
        <el-select v-model="formData.brandId" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in brandList"
            :key="item.id"
            :label="`${item.title}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题*" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入标题"
        />
      </el-form-item>
      <el-form-item label="藏品类型*" prop="type">
        <el-select v-model="formData.type" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="`${item.label}`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type === 10" label="模型类型*" prop="subType">
        <el-select v-model="formData.subType" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in subTypeList"
            :key="item.value"
            :label="`${item.label}`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="跳转地址" prop="jumpUrl">
        <el-input
          v-model="formData.jumpUrl"
          placeholder="请输入跳转地址"
        />
      </el-form-item>
      <el-form-item label="跳转类型" prop="jumpType">
        <el-select v-model="formData.jumpType" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in jumpTypeList"
            :key="item.value"
            :label="`${item.label}`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故事内容" prop="storyContent">
        <el-input
          v-model="formData.storyContent"
          :rows="3"
          placeholder="请输入故事内容"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="排序值">
        <el-input-number v-model="formData.sort" label="描述文字" value="0" />
      </el-form-item>
    </el-form>

    <div align="center" class="dialog-footer">
      <el-button size="small" @click="closeDialog">取 消</el-button>
      <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditCollection',
}
</script>

<script setup>

import { defineEmits, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { brandListAll, createCollection, updateCollection } from '@/api/collection'

const emit = defineEmits(['editRes'])

const props = defineProps(['detail'])

const brandList = ref([])
const formData = ref({
  title: '',
  storyContent: '',
  sort: 0
})

const typeList = [
  {
    'label': '模型',
    'value': 10,
  },
  {
    'label': '空间',
    'value': 20,
  },
  {
    'label': '图片',
    'value': 30,
  },
]

const subTypeList = [
  {
    'label': '模型类型:OBJ',
    'value': 1,
  },
  {
    'label': '模型类型:GLB',
    'value': 2,
  },
]

const jumpTypeList = [
  {
    'label': 'APP',
    'value': 1,
  },
  {
    'label': 'H5',
    'value': 2,
  },
  {
    'label': '小程序',
    'value': 3,
  },
]

// 获取品牌列表
const getBrandList = async() => {
  const res = await brandListAll()
  if (res.code === 200) {
    brandList.value = res.data.list
  }
}

const closeDialog = () => {
  formData.value = {
    title: '',
    storyContent: '',
    sort: 0
  }
  editRes(false)
}

const enterDialog = async() => {
  const res = _validatorFormData()
  if (res.code === 400) {
    ElMessage({
      message: res.msg,
      url: 'warning',
    })
    return
  }

  if (formData.value.id !== undefined) {
    // 更新藏品
    const createRes = await updateCollection(formData.value)
    if (createRes.code === 200) {
      ElMessage({
        type: 'success',
        message: '更新成功！'
      })
      editRes(false)
    }
  } else {
    // 新增藏品
    const createRes = await createCollection(formData.value)
    if (createRes.code === 200) {
      ElMessage({
        type: 'success',
        message: '添加成功！'
      })
      editRes(false)
    }
  }
}

const editRes = (status) => {
  emit('editRes', status)
}

const _validatorFormData = () => {
  const res = {
    code: 400,
    msg: '',
  }
  // console.log(formData.value)
  if (formData.value.title === '') {
    res.msg = '标题必须存在'
    return res
  }
  if (formData.value.type === undefined || formData.value.type === '') {
    res.msg = '藏品类型必须存在'
    return res
  }
  if (formData.value.type === 10 && (formData.value.subType === undefined || formData.value.subType === '')) {
    res.msg = '模型类型必须存在'
    return res
  }
  if (formData.value.storyContent === '') {
    res.msg = '故事内容必须存在'
    return res
  }

  res.code = 200
  return res
}

const initData = () => {
  if (props['detail'] !== undefined) {
    formData.value = props['detail']
  }
}

initData()
getBrandList()
</script>
